import React, { useRef, useState } from "react";
import Upload from "./components/upload";
import add from "./add.jpg";

function App() {
  const [images, setImage] = useState<string[]>([]);

  const upload = (file: File) => {
    console.log(file);
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.addEventListener("load", () => {
      const url = fileReader.result as string;
      setImage([...images, url]);
    });
  };

  return (
    <div className="App">
      <Upload upload={upload}>
        <img src={add} alt="" width={200} height={200} />
      </Upload>
      <div>
        {images.map((v, i) => {
          return <img src={v} key={i} alt="" width={200} height={200} />;
        })}
      </div>
    </div>
  );
}

export default App;

// 1. Blob: 二进制 不可变数据
// const b1 = new Blob(["I am a person"], { type: "text/plain" });

// const url = URL.createObjectURL(b1);

// console.log(url);

// 2. File ：  文件（File）接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。
// File 对象是特殊类型的 Blob
